import React, { useState, useLayoutEffect, useContext } from "react";
import {
  View,
  Text,
  StyleSheet,
  Dimensions,
  ScrollView,
  Image,
  TouchableOpacity,
} from "react-native";
import { AntDesign } from "@expo/vector-icons";
import ComMaterialContext from "../../context/suppiler/comMaterialContext";
import { fileWeb } from "../../api/query";
import { AMAZON_URL } from "../../api/query";
const dimen = Dimensions.get("window");
const width = dimen.width;

const SuppilerDetail = ({ route, navigation }) => {
  const { itemDetail } = route.params;
  const { comMaterial } = useContext(ComMaterialContext);

  const [currentPage, setPage] = useState(0);
  // let imageArr = ["../../../assets/image.png", "../../../assets/ceshi_1.png"];
  // console.log("商品详情", itemDetail);

  const onAnimationEnd = (e) => {
    // 求出水平方向上的偏移量
    let offSetX = e.nativeEvent.contentOffset.x;
    // 计算当前页码
    let currentPage = offSetX / width;
    // console.log("currenPage---", currentPage);
    // 重新绘制UI
    setPage(currentPage);
    // console.log(currentPage);
  };

  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <TouchableOpacity
          onPress={() => {
            navigation.navigate("SuppilerAdd", {
              itemDetail: itemDetail,
              title: "编辑商品",
              type: "edit",
            });
          }}
        >
          <AntDesign name="edit" size={22} color="#FAAC58" />
        </TouchableOpacity>
      ),
    });
  }, [navigation]);

  return (
    <View style={{ backgroundColor: "#fff", flex: 1 }}>
      <ScrollView showsVerticalScrollIndicator={false}>
        <View>
          {/* <ScrollView
            horizontal={true} // 水平方向
            showsHorizontalScrollIndicator={false} // 隐藏水平指示器
            showsVerticalScrollIndicator={false} // 隐藏垂直指示器
            pagingEnabled={true} // 开启分页功能
            onMomentumScrollEnd={onAnimationEnd} // 当一帧滚动完毕的时候调用
          >
            {typeof itemDetail.image[0].filePath === "undefined" &&
              itemDetail.image.map((item, index) => {
                return (
                  <Image
                    key={index}
                    style={styles.imageStyle}
                    source={{ uri: AMAZON_URL + "/" + item }}
                  />
                );
              })}
            {itemDetail.image[0].filePath &&
              itemDetail.image.map((item, index) => {
                return (
                  <Image
                    key={index}
                    style={styles.imageStyle}
                    source={{
                      uri: fileWeb + "/" + itemDetail.image[index].filePath,
                    }}
                  />
                );
              })}
          </ScrollView> */}
          {/* 实例化分页指示器 */}
          <View style={styles.pagingIndicatorStyle}>
            {itemDetail.image.map((item, index) => {
              return (
                <Text
                  key={index}
                  style={[
                    { fontSize: 30 },
                    currentPage === index
                      ? { color: "orange" }
                      : { color: "white" },
                  ]}
                >
                  &bull;
                </Text>
              );
            })}
          </View>
        </View>
        <View style={styles.itemList}>
          <View style={styles.title}>
            <View style={styles.frontPart}>
              <AntDesign
                name="sharealt"
                size={20}
                color="#505050"
                style={{ marginRight: 6 }}
              />
              <Text style={styles.titleText}>商品名称</Text>
            </View>
            <View style={{ flex: 1 }}>
              <Text style={[styles.textStyle, { alignSelf: "center" }]}>
                {itemDetail.title}
              </Text>
            </View>
          </View>
          <View style={styles.title}>
            <View style={styles.frontPart}>
              <AntDesign
                name="tagso"
                size={24}
                color="#505050"
                style={{ marginRight: 3 }}
              />
              <Text style={styles.titleText}>商品形状</Text>
            </View>
            <View style={{ flex: 1 }}>
              <Text style={[styles.textStyle, { alignSelf: "center" }]}>
                {itemDetail.shape}
              </Text>
            </View>
          </View>

          <View style={styles.title}>
            <View style={styles.frontPart}>
              <Image
                style={{
                  width: 22,
                  height: 22,
                  marginTop: 2,
                  resizeMode: "contain",
                  marginRight: 5,
                }}
                source={require("../../../assets/shangpin.png")}
              />
              <Text style={styles.titleText}>商品详情</Text>
            </View>
          </View>

          <View style={{ flexDirection: "row", justifyContent: "center" }}>
            <View
              style={{
                flex: 1,
                borderRightWidth: 1,
                borderRightColor: "#eee",
                padding: 10,
              }}
            >
              <View style={styles.mtitleView}>
                <Text style={styles.mtitle}>基板</Text>
                <View style={styles.mShadow}></View>
              </View>
              <View style={{ alignSelf: "center" }}>
                <View style={styles.mItem}>
                  <Text style={styles.mText}>
                    类别: {itemDetail.baseplate.category}
                  </Text>
                </View>
                <View style={styles.mItem}>
                  <Text style={styles.mText}>
                    型号: {itemDetail.baseplate.type}
                  </Text>
                </View>
                <View style={styles.mItem}>
                  <Text style={styles.mText}>
                    密度: {itemDetail.baseplate.density} g/m³
                  </Text>
                </View>
                <View style={styles.mItem}>
                  <Text style={styles.mText}>
                    原料费: {itemDetail.baseplate.m_cost}
                    {itemDetail.baseplate.processMode === "0" ? (
                      <Text style={styles.mText}> 元/㎡</Text>
                    ) : (
                      <Text style={styles.mText}> 元/kg</Text>
                    )}
                  </Text>
                </View>
                <View style={styles.mItem}>
                  <Text style={styles.mText}>
                    加工费: {itemDetail.b_process.price}
                    {itemDetail.b_process.processMode === "0" ? (
                      <Text style={styles.mText}> 元/㎡</Text>
                    ) : (
                      <Text style={styles.mText}> 元/kg</Text>
                    )}
                  </Text>
                </View>
              </View>
            </View>
            <View style={{ flex: 1, padding: 10 }}>
              <View style={styles.mtitleView}>
                <Text style={styles.mtitle}>覆板</Text>
                <View style={styles.mShadow}></View>
              </View>
              <View style={{ alignSelf: "center" }}>
                <View style={styles.mItem}>
                  <Text style={styles.mText}>
                    类别: {itemDetail.shroudplate.category}
                  </Text>
                </View>
                <View style={styles.mItem}>
                  <Text style={styles.mText}>
                    型号: {itemDetail.shroudplate.type}
                  </Text>
                </View>
                <View style={styles.mItem}>
                  <Text style={styles.mText}>
                    密度: {itemDetail.shroudplate.density} g/m³
                  </Text>
                </View>
                <View style={styles.mItem}>
                  <Text style={styles.mText}>
                    原料费: {itemDetail.shroudplate.m_cost}
                    {itemDetail.shroudplate.processMode === "0" ? (
                      <Text style={styles.mText}> 元/㎡</Text>
                    ) : (
                      <Text style={styles.mText}> 元/kg</Text>
                    )}
                  </Text>
                </View>
                <View style={styles.mItem}>
                  <Text style={styles.mText}>
                    加工费: {itemDetail.s_process.price}
                    {itemDetail.s_process.processMode === "0" ? (
                      <Text style={styles.mText}> 元/㎡</Text>
                    ) : (
                      <Text style={styles.mText}> 元/kg</Text>
                    )}
                  </Text>
                </View>
              </View>
            </View>
          </View>
        </View>
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  imageStyle: {
    width: width,
    height: 250,
    resizeMode: "cover",
  },
  pagingIndicatorStyle: {
    backgroundColor: "rgba(255,255,255,0.0)",
    width: width,
    // 主轴方向与对齐方式
    flexDirection: "row",
    justifyContent: "center",
    // 绝对定位,使页码指示器盖在scrollView上面
    position: "absolute",
    bottom: 0,
  },
  itemList: {
    backgroundColor: "#fff",
    padding: 10,
  },
  title: {
    flexDirection: "row",
    paddingBottom: 10,
    // borderBottomWidth: 1,
    // borderBottomColor: "#eee",
    justifyContent: "space-between",
    marginBottom: 8,
  },
  tagtitle: {
    flexDirection: "row",
    paddingBottom: 10,
    borderBottomWidth: 1,
    borderBottomColor: "#ddd",
    marginBottom: 10,
  },
  littleTitle: {
    paddingBottom: 10,
    borderBottomWidth: 1,
    borderBottomColor: "#ddd",
    marginBottom: 10,
    marginLeft: 10,
    marginRight: 10,
  },
  frontPart: {
    flexDirection: "row",
    marginLeft: 10,
  },
  titleText: {
    fontSize: 17,
    fontWeight: "bold",
    color: "#333",
  },
  iconRight: {
    alignSelf: "center",
    marginRight: 10,
  },
  textStyle: {
    fontSize: 16,
    marginRight: 3,
  },
  mText: {
    fontSize: 15,
  },
  mItem: {
    padding: 3,
  },
  mtitleView: {
    alignSelf: "center",
    marginBottom: 10,
    height: 20,
  },
  mtitle: {
    fontSize: 16,
    paddingLeft: 10,
    paddingRight: 10,
    fontWeight: "bold",
    alignSelf: "center",
    borderBottomWidth: 5,
    borderBottomColor: "#6c9eff",
  },
});

export default SuppilerDetail;
